昨天我們直接在 Python 中回傳 HTML。這種方式適合測試，但網站越來越複雜時，把所有網頁內容塞進 Python 就會很難維護。

今天要將 HTML 放到獨立檔案。

1. 建立 HTML 檔案
   在 templates 資料夾內建立：
   templates/
   └── index.html

完整專案結構現在應該是：
my-media-library/
├── app.py
├── requirements.txt
├── templates/
│ └── index.html
└── static/

2. 撰寫首頁 HTML
   打開 templates/index.html，貼上：

<main>
    <section>
        <h2>歡迎回到你的收藏庫</h2>
        <p>把喜歡的作品整理起來，不再忘記看過什麼、玩過什麼。</p>

        <button type="button">查看電影</button>
        <button type="button">查看遊戲</button>
    </section>
</main>

<footer>
    <p>My Media Library © 2026</p>
</footer>

這裡的按鈕目前只有外觀，尚未連接實際功能。我們會在後續天數逐步實作。
3. 修改 app.py
把 Day 2 的程式碼整份替換成下面這個版本：
from flask import Flask, render_templateapp = Flask(name)@app.route("/")def home(): return render_template("index.html")if name == "main": app.run(debug=True)

這裡新增了：
from flask import Flask, render_template

render_template() 可以讓 Flask 載入 templates 資料夾中的 HTML 檔案。

接著：
return render_template("index.html")

代表首頁不再直接回傳一長串 HTML，而是交由 index.html 負責呈現。

Flask 會依照預設的資料夾結構尋找模板，因此檔名與資料夾名稱要正確。

Flask Documentation (3.1.x)

4. 重新執行網站
   如果上一天的伺服器還在執行，可以在終端機按 Ctrl + C 停止。

再輸入：
python app.py

回到瀏覽器重新整理 http://127.0.0.1:5000。

你應該會看到標題、介紹文字、兩個按鈕與頁尾。
5. 常見錯誤與解決方式
問題 可能原因 解決方法
TemplateNotFound HTML 檔案放錯位置 確認檔案在 templates/index.html
ModuleNotFoundError: flask Flask 未安裝在目前環境 啟動 .venv 後重新安裝
網站無法開啟 伺服器未執行 重新輸入 python app.py
修改後沒有更新 頁面尚未重新整理 重新整理瀏覽器；必要時重啟伺服器